<template>
  <div :index="index" @indexChange="indexclick">
    <div ref="circuit" class="circuit-box">
      <!-- 顶部导航 -->

      <div class="circuit-head">
        <div class="title">
          <slot name="circuit-header">
            <span>线路编辑</span>
          </slot>
          <div class="right">
            <span @click="showCircuit" class="button">创建线路</span>
          </div>
        </div>
      </div>

      <!-- 内容区 -->
      <div class="circuit-body">
        <!-- 左侧 -->

        <div>
          <div class="textarea-box">
            <span>线路名:</span>
            <textarea
              maxlength="30"
              placeholder="请输入标题，不超过30字"
              v-model="setCiruit.route_title"
            ></textarea>
          </div>
          <div class="select">
            <span class="a">目的地:</span>
            <div id="destination" @click="unfold">
              请选择
              <i disabled class="toright"></i>
              <ul v-show="ulshow" ref="ul">
                <li
                  v-for="(item, index) in destinations"
                  :key="item.cri_code"
                  @click.stop="thisActive($event, index)"
                >
                  {{ item.province_name }}
                </li>
              </ul>
              <!-- 市级选择 -->
              <div v-show="citys">
                <ul ref="city" class="city">
                  <li
                    v-for="item in city"
                    :key="item.id"
                    @click.stop="getcity($event, item.id)"
                  >
                    {{ item.destination_name }}
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="select">
            <span class="a">线路类型:</span>
            <div id="destination" @click="typesShow = !typesShow">
              请选择
              <i disabled class="toright"></i>
              <ul v-show="typesShow">
                <li
                  v-for="item in circuittypes"
                  :key="item.id"
                  @click.stop="setTypes($event)"
                >
                  {{ item.category_name }}
                  <span>{{ item.id }}</span>
                </li>
              </ul>
            </div>
          </div>

          <div>
            <span>出游天数:</span>
            <input type="number" v-model.number="setCiruit.days" />
          </div>

          <slot name="patch_1">
            <div>
              <span>价格:</span>
              <input type="number" v-model="setCiruit.agency_price" />
            </div>
          </slot>

          <div class="ziyouxin">
            <span>是否自由行:</span>

            <el-popover
              placement="top-start"
              title="关于自由行"
              width="200"
              trigger="hover"
              content="默认导游指线路全程已包含跟团领队，如线路非自由行路线，请选择“是”"
            >
              <i slot="reference" class="question"></i>
            </el-popover>
            <div id="destination" @click="guide = !guide">
              否
              <ul v-show="guide" class="guide">
                <li @click.stop="getnumber($event)">否</li>
                <li @click.stop="getnumber($event)">是</li>
              </ul>
            </div>
          </div>
          <div class="text">
            <span>自由行线路旅社不提供导游服务</span>
          </div>

          <slot name="patch_2">
            <div>
              <span class="switch">开放第三方导游跟团:</span>
              <el-popover
                placement="top-start"
                title="关于开放第三方导游"
                width="200"
                trigger="hover"
                content="开放后，第三方导游将可申请跟团，用户购买时即可挑选专属导游陪伴出行或讲解等。"
              >
                <i slot="reference" class="question"></i>
              </el-popover>
              <el-switch
                v-model="setCiruit.is_allow_other_guide"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
          </slot>

          <slot name="patch_3">
            <div>
              <span>第三方导游成本 :</span>
              <el-popover
                placement="top-start"
                title="关于第三方导游成本"
                width="400"
                trigger="hover"
                content="如开放第三方导游，平台内其他导游将可申请独立带团，用户参团时即可挑选专属导游陪伴出行，由于额外加入的导游可能占一定的交通、食宿名额，产生额外成本，请根据实际情况填写导游成本，该部分金额将结算到本线路收入。"
              >
                <i slot="reference" class="question"></i>
              </el-popover>
              <input
                :disabled="!setCiruit.is_allow_other_guide"
                class="text-right"
                v-model="setCiruit.other_guide_cost"
                type="text"
                placeholder="元/人"
              />
            </div>
            <div>
              <span>第三方导游服务费:</span>
              <el-popover
                placement="top-start"
                title="关于第三方导游服务费"
                width="200"
                trigger="hover"
                content="第三方导游服务费指第三方导游挂靠这条线路，如被消费者选中，导游能得到的收入"
              >
                <i slot="reference" class="question"></i>
              </el-popover>
              <input
                class="text-right"
                type="text"
                :disabled="!setCiruit.is_allow_other_guide"
                v-model="setCiruit.other_guide_service_fee"
                placeholder="元/人"
              />
            </div>
          </slot>

          <!-- 图片上传 -->
          <div class="datacontent">
            <!-- 第一列 -->
            <div>
              <div>
                <span v-show="static_list[0].file_url" @click="removeupload(0)"
                  >×</span
                >
                <div>
                  <video ref="video" src=""></video>
                  <input
                    class="upload"
                    type="file"
                    title="请选择上传的视频"
                    v-show="!static_list[0].file_url"
                    @change="changevideo1($event, 0)"
                  />

                  <i v-show="!static_list[0].file_url" class="video"></i>
                </div>
              </div>

              <!-- 第二张图 -->
              <div>
                <span v-show="static_list[1].file_url" @click="removeupload(1)"
                  >×</span
                >
                <div>
                  <img
                    v-show="static_list[1].file_url"
                    :src="static_list[1].file_url"
                    alt=""
                  />
                  <input
                    v-show="!static_list[1].file_url"
                    @change="upload1($event, 1)"
                    class="upload"
                    type="file"
                    title="请选择上传的图片"
                    multiple
                  />
                  <i v-show="!static_list[1].file_url"></i>
                </div>
              </div>
              <!-- 第三张图 -->
              <div>
                <span @click="removeupload(2)" v-show="static_list[2].file_url"
                  >×</span
                >
                <div @click="upload2 = true">
                  <img
                    v-show="static_list[2].file_url"
                    :src="static_list[2].file_url"
                    alt=""
                  />
                  <input
                    v-show="!static_list[2].file_url"
                    @change="upload1($event, 2)"
                    class="upload"
                    title="请选择上传的图片"
                    type="file"
                    multiple
                  />
                  <i v-show="!static_list[2].file_url"></i>
                </div>
              </div>
            </div>

            <!-- 第二列 -->
            <div v-show="upload2">
              <!-- 一张 -->
              <div>
                <span v-show="static_list[3].file_url" @click="removeupload(3)"
                  >×</span
                >
                <div>
                  <img
                    v-show="static_list[3].file_url"
                    :src="static_list[3].file_url"
                    alt=""
                  />
                  <i v-show="!static_list[3].file_url"></i>
                  <input
                    v-show="!static_list[3].file_url"
                    class="upload"
                    @change="upload1($event, 3)"
                    type="file"
                  />
                </div>
              </div>
              <!-- 二张 -->
              <div>
                <span v-show="static_list[4].file_url" @click="removeupload(4)"
                  >×</span
                >
                <div>
                  <i v-show="!static_list[4].file_url"></i>
                  <img
                    v-show="static_list[4].file_url"
                    :src="static_list[4].file_url"
                    alt=""
                  />
                  <input
                    v-show="!static_list[4].file_url"
                    class="upload"
                    @change="upload1($event, 4)"
                    type="file"
                  />
                </div>
              </div>
              <!-- 三张 -->
              <div>
                <span v-show="static_list[5].file_url" @click="removeupload(5)"
                  >×</span
                >
                <div>
                  <i v-show="!static_list[5].file_url"></i>
                  <img
                    v-show="static_list[5].file_url"
                    :src="static_list[5].file_url"
                    alt=""
                  />
                  <input
                    v-show="!static_list[5].file_url"
                    class="upload"
                    @change="upload1($event, 5)"
                    type="file"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间 -->
        <div id="wang" v-show="!iswang">富文本</div>

        <!-- 简易模式 -->
        <div v-show="iswang" class="simple">
          <slot name="content2_header">
            <div>
              <span>详情</span>
              <div>
                <span>高级模式</span>
                <span>简易模式</span>
              </div>
            </div>
          </slot>

          <div class="simple-view" ref="wang">
            <!-- 点击选择图片 -->
            <div
              v-for="(item, index) in route_service_details_list"
              :key="index"
              :class="item.type != 1 ? 'upload_div' : 'text_area'"
            >
              <span @click="detailsremove(index)" class="delete">×</span>
              <!-- 文本文件 -->
              <textarea
                v-if="item.type == 1"
                cols="30"
                rows="10"
                v-model="item.content"
                placeholder="请填写详情文案"
              >
              </textarea>
              <!-- 是图片文件 -->
              <img
                v-if="item.type == 2"
                v-show="item.content"
                :src="item.content"
                alt=""
              />
              <!-- 是视频文件 -->
              <video
                style="width: 100%"
                controls
                v-if="item.type == 3"
                v-show="item.content"
                :src="item.url"
                alt=""
              />
              <div v-show="!item.content">
                <i v-if="item.type == 2"></i>
                <i v-if="item.type == 3" class="video"></i>
                <p v-if="item.type == 2">点击选择相片</p>
                <p v-if="item.type == 3">点击选择视频</p>
                <!-- 是图片文件 -->
                <input
                  v-if="item.type == 2"
                  class="upload"
                  type="file"
                  @change="upload($event, index)"
                />
                <!-- 是视频文件 -->
                <input
                  v-if="item.type == 3"
                  class="upload"
                  type="file"
                  @change="changevideo($event, index)"
                />
              </div>
            </div>
          </div>

          <!-- 底部 -->
          <div class="controller">
            <span @click="addimg">+图片</span>
            <span @click="addmp4">+视频</span>
            <span @click="addtextarea">+文案</span>
            <span>排序</span>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="circuit_right_content">
          <div>
            <p>
              <span>费用说明</span>
            </p>
            <textarea
              cols="30"
              rows="10"
              v-model="setCiruit.expense_description"
              placeholder="请填写费用包含丶费用不含等"
            >
            </textarea>
          </div>

          <!-- 注意事项 -->
          <div>
            <p>
              <span>注意事项</span>
            </p>
            <textarea
              cols="30"
              rows="10"
              v-model="setCiruit.precautions"
              placeholder="请填写注意事项"
            >
            </textarea>
          </div>

          <!-- 退订须知 -->
          <div>
            <p>
              <span>推定须知</span>
            </p>
            <table id="table" border="1">
              <tr>
                <th>行程开始前</th>
                <th>可退回金额</th>
              </tr>
              <tr>
                <td>7天及以上</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>4-6天</td>
                <td>
                  <el-popover
                    placement="top-start"
                    title="关于退款"
                    width="160"
                    trigger="hover"
                    content="如40% 则输入40 即可😊"
                  >
                    <input
                      type="text"
                      slot="reference"
                      maxlength="3"
                      v-model="setCiruit.second_refund_scale"
                      placeholder="请输入可退款比例"
                      class="table-input"
                    />
                  </el-popover>
                </td>
              </tr>
              <tr>
                <td>2-3天</td>
                <td>
                  <input
                    type="text"
                    maxlength="3"
                    v-model="setCiruit.three_refund_scale"
                    placeholder="请输入可退款比例"
                    class="table-input"
                  />
                </td>
              </tr>
              <tr>
                <td>1天及以内</td>
                <td>无法退款</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 插槽开始 -->
    <slot name="submitslot">
      <!-- 确认提交 -->
      <div class="setsubmit" v-show="submit">
        <p>确认提交</p>
        <span>线路提交后，需审核通过后才能正</span>
        <div>
          <span> 常上架，确认编辑无误并提交？</span>
        </div>
        <div>
          <el-switch
            v-model="setCiruit.auto_in_operation"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span>审核通过后自动上架</span>
        </div>
        <div>
          <span @click="cancel">取消</span>
          <span @click="circuitsubmit">提交</span>
        </div>
      </div>
    </slot>
    <!-- 插槽结束 -->

    <!-- 详情排序 -->
    <div></div>
    <!-- 背景遮蔽层 -->
    <div v-show="submit" class="background"></div>
  </div>
</template>
<script>
import imgciruit from "@/mixins/circuit/ciruit"; // 线路编辑的左侧混入
import E from "wangeditor";
import setciruit from "@/mixins/circuit/setcircuit"; // 线路发布的方法

export default {
  mixins: [imgciruit, setciruit],
  props: ["index"],
  data() {
    return {
      iswang: true,
      num: "",
      value: "",
    };
  },

  mounted() {
    const editor = new E("#wang");
    editor.config.padding = 0;
    editor.create();
  },
};
</script>

<style lang='less'>
.button {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  padding: 0 10px;
  border-radius: 4px;
  line-height: 4.2vh;
  color: #07c160;
  &:hover {
    background-color: #0dd46d;
  }
}
// 头部区域
.circuit-head {
  .title {
    padding-bottom: 1vh;
  }
}

// 图片添加/视频/文案样式

// 1.图片 的基础样式
.upload_div {
  width: 23.4vw;
  border-radius: 6px;
  background-color: #e8e8e8;
  height: 27vh;
  display: flex;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.16);

  // 图片预览
  & > img {
    margin: 0 auto;
    height: 100%;
  }
  & > div {
    width: 100%;
    padding-top: 9vh;
    text-align: center;

    // file
    input[type="file"] {
      position: absolute;
      top: -20%;
      width: 100%;
      left: 0%;
      height: 120%;
      border: none;
    }

    i {
      display: inline-block;
      height: 2vw;
      width: 2vw;
      background: url("../assets/photo.png") no-repeat;
      background-size: 100% 100%;
      &.video {
        background: url("../assets/video.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}

.circuit-body input,
.circuit-body textarea#text_area {
  width: 100%;
}
.circuit-body table input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border: none;
  color: #07c160;
  padding: 0;
  padding-left: 3vh;
  &::placeholder {
    color: #07c160;
  }
}
.circuit-body table td {
  position: relative;
  overflow: hidden;
}
// 内容主体
.circuit-body {
  margin-top: 1.6vh;
  height: 78.6vh;
  display: flex;
  textarea::placeholder {
    color: #ccc;
    font-weight: 500;
  }
  // 第二盒子，因为富文本也在
  & > div:nth-child(3) {
    position: relative;
    margin-top: 0;
    padding: 1.2vh 1vw;
    font-size: 14px;
    overflow: auto;
    width: 25%;
    background-color: #f1f4f6;
    padding-bottom: 6vh;

    & > div.simple-view {
      height: 66vh;
      padding: 0 8px;
      overflow: auto;
      // 滚动条样式
      &::-webkit-scrollbar {
        width: 8px;
        background-color: #f9f9ff;
        // background-clip: padding-box;
        // min-height: 1vw;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #ccc;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
      }
    }

    & > div,
    & > div.simple-view > div {
      text-align: left;
      width: 21vw;
      margin-bottom: 1vh;
      // 标题
      &:not(:last-child) > span {
        font-weight: 550;
      }
      // 模式的样式
      & > div {
        float: right;
        span:not(.delete) {
          cursor: pointer;
          font-size: 12px;
          padding: 1px 2px;
          color: rgb(175, 174, 174);
          border: 2px solid #ccc;
          // 高级模式
          &:first-child:not(.delete) {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            background-color: #ffffff;
          }
          // 简易模式
          &:last-child {
            border: 2px solid #07c160;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            border-left: none;
            color: #07c160;
          }
          &:first-child:hover {
            // background-color: #07c160;
            color: #07c160;
            box-sizing: content-box;
            border: 2px solid #07c160;
          }
        }
      }
    }
    // 底部控制区域
    .controller {
      position: absolute;
      bottom: 0;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      border-radius: 0px 0px 4px 4px;
      background-color: #ffffff;
      width: 98%;
      left: 1%;
      span:not(:last-child) {
        float: left;
        color: #07c160;
      }
      & > * {
        margin-left: 1vh;
        padding: 1.4vh;
        cursor: pointer;
        &:hover {
          border-radius: 50%;
          background-color: #f6f6f6;
        }
        &:active {
          color: #0dd46d;
        }
      }
      span:last-child {
        float: right;
      }
    }
  }
  & > div:first-child {
    padding-top: 0;
    padding-left: 0.1vw;
    width: 35%;
  }

  & > div:last-child {
    background-color: #f1f4f6;
    & > div > p {
      font-size: 14px;
      font-weight: 550;
      text-align: left;
    }
    & > div {
      table {
        text-align: left;
        margin: 0 auto;
        border-collapse: collapse;
        background-color: #ffffff;
        border: 1px solid #ccc;
        font-size: 14px;
        width: 100%;
        td,
        th {
          border: 2px solid #f6f6ff;
          color: #666;
          padding: 0.4vh 1.4vh;
          padding-left: 3vh;
          height: 4vh;
        }
      }
    }
  }

  #wang {
    & > div {
      border: none im !important;
    }
    .w-e-toolbar {
      border: none;
    }
  }
}
input.text-right::placeholder {
  text-align: right;
  font-size: 12px;
}
// "dev": "vue-cli-service serve --mode dev",
// "build": "vue-cli-service build --mode prod",
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.circuit_right_content {
  width: 28%;
  & > div {
    & > p {
      padding: 1vh 0;
    }
  }
  textarea {
    width: 94%;
    height: 9vh;
  }
}
.datacontent {
  width: 80%;
  margin: 0 auto;
  margin-top: 4vh;
  height: 12vh;
  padding-left: 2.5vw;
  overflow: auto;

  overflow-x: hidden;
  // 滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
    background-color: #f9f9ff;
    background-clip: padding-box;
    // min-height: 1vw;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  &::-webkit-scrollbar-thumb {
    width: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  & > div {
    width: 100%;
    height: 12vh;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    & > div {
      position: relative;
      margin-right: 1vw;

      & > div {
        overflow: hidden;
        width: 11vh;
        height: 10vh;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #dcdcdc;

        video {
          position: relative;
          z-index: 12;
          height: 100%;
          width: 100%;
        }
        img {
          text-align: center;

          width: 100%;
          height: 100%;
        }
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 1.5vw;
          width: 1.5vw;
          background: url("../assets/photo.png") no-repeat;
          background-size: 100% 100%;
        }
        i.video {
          background: url("../assets/video.png") no-repeat;
          background-size: 100% 100%;
        }
        input {
          cursor: pointer;
          position: absolute;
          z-index: 16;
          left: 0;
          bottom: 0;
          height: 150%;
          width: 9vh;
          border: none;
        }
      }
      // 删除标
      span {
        cursor: pointer;
        height: 1.2vw;
        line-height: 1.2vw;
        color: #f6f6ff;
        width: 1.2vw;
        z-index: 15;
        text-align: center;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 1);
        position: absolute;
        top: -0.4vw;
        right: -0.5vw;
        &:hover {
          background-color: rgba(0, 0, 0, 0.6);
        }
      }
    }
  }
}
// 提交提醒
.setsubmit {
  padding: 1.4vh 2vh;
  position: fixed;
  overflow: hidden;
  width: 31vh;
  height: 17vh;
  z-index: 18;
  left: 50%;
  top: 50%;
  border-radius: 12px;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #ffffff;
  filter: none;
  & > p {
    font-weight: 550;
    filter: none;
    margin-bottom: 0.6vh;
  }
  & > span,
  & > div:nth-child(3) > span {
    font-size: 14px;
    color: #000;
  }
  & > div:nth-child(4) {
    margin-top: 1.6vh;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
  }
  & > div:last-child {
    span {
      user-select: none;
      display: inline-block;
      width: 50%;
      cursor: pointer;
      line-height: 40px;
      &:last-child {
        color: #07c160;
      }
      &:hover {
        background-color: #ccc;
        color: #ffffff;
      }
    }
  }
}
.background {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 17;
  background-size: cover;
  box-sizing: border-box;
}
</style>